<template>
  <div class="list">
    <h2>猜你喜欢</h2>
    <div class="like">
        <div class="choice" v-for="(item,index) in likeArr" :key="index" @click="handleClick(index)" :class="{active: currentIndex == index }">
            <span >{{item}}</span>
        </div>
        <div class="type" >
            <span v-for="(item,index) in typeArr" :key="index">{{item}}</span>
        </div>
    </div>
    <div class="shop" v-for="(item,index) in list" :key="index">
        <div class="imgbox">
            <img :src="item.pic" alt="">
        </div>
        <div class="text">
            <h3 class="name">{{item.name}}</h3>
            <div class="saledbox">
                <div class="score">{{item.score}}</div>
                <div class="count">月售{{item.count}}</div>
            </div>
            <div class="disbox">
                <div class="start">起送￥{{item.start}}</div>
                <div class="fee">远距离配送￥{{item.fee}}</div>
                <div class="time">{{item.time}}分钟</div>
                <div class="distance">{{item.distance}}km</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
var pic = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201411%2F09%2F20141109001942_Qczrs.thumb.700_0.png&refer=http%3A%2F%2Fimg5.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668240959&t=8fecaff8b462474ba18dcbd9bcfd60b1"
export default {
    data(){
        return {
            currentIndex:0,
            likeArr:['综合排序','距离最近','销量最高','筛选'],
            typeArr:['年货节热卖','津贴联盟','满减优惠','品质联盟'],
            list:[
                {pic,name:'烤鸭店',score:4.3,count:1632,start:20,fee:3,time:47,distance:3.9},
                {pic,name:'饺子馆',score:4.4,count:1257,start:21,fee:3.5,time:47,distance:2.7},
                {pic,name:'烤馍店',score:4.2,count:1352,start:22,fee:3.2,time:47,distance:4.1},
                {pic,name:'日料店',score:4.0,count:1489,start:23,fee:3.8,time:47,distance:2.5},
            ],
        }
    },
    methods:{
        handleClick(index){
            this.currentIndex = index;
            if(index == 1){
                this.list.sort((a,b)=>{
                    return a.distance - b.distance;
                })
            }else if(index == 2){
                this.list.sort((a,b)=>{
                    return b.count - a.count;
                })
            }
        },
        mysort(index){

        }
    },
}
</script>

<style lang="scss" scoped>

h2{
  padding: 0 10px;
}
.like{
    display: flex;
    justify-content: space-around;
    margin:10px 0;
    flex-wrap: wrap;
}
.like .choice.active{
    color:#3cbdff;
}
.like .type{
    margin: 10px 0;
}
.like .type span{
    padding: 0 5px;
    background-color: #f5f5f5;
    margin: 0 5px;
}
.list .shop{
    margin: 10px;
    display: flex;
    // justify-content: space-around;
    // float: left;
}
.shop .imgbox img{
    width: 70px;
    height: 70px;
    border-radius: 10px;
}
.shop .text{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.shop .text .name{
    font-size: 18px;
}
.shop .text .saledbox{
    font-size: 12px;
    display: flex;
}
.shop .text .disbox{
    font-size: 12px;
    display: flex;
    justify-content: space-around;
}
.shop .text .disbox div{
    margin-right:10px;
}

</style>